<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取样式</title>
    <style>
    .box1 {
        width: 200px;
        height: 200px;
        background-color: rgba(0,0,255,0.8);
        margin: 10px auto;
        border-color: yellow;
    }
    /* 伪类 */
    .box1:hover {
        width: 300px;
        height: 300px;
        margin: 30px auto;
        border-color: black  !important;
        border-radius: 50%;
        background:rgba(0,255,0,0.7) url(./images/IMG_3.JPG) center / 300px auto;
        
    }
    /* 伪元素 */
    .box1::before{
        content: "";
        display: block;
        background-color: yellow;
        width: 20px;
        height: 20px;

    }
    button {
        display: block;
        margin: 50px auto;
        width: 60px;
        height: 40px;
        font-size: 10px;
        border-radius: 10px;
    }
    </style>

    <script>
        /* 
        getComputedStyle() 是一个window方法，
            该方法会返回一个对象，这个对象中包含了当前元素所有的生效的样式。

            参数：
                1.要获取的元素
                2.要获取的伪元素

            返回值
                返回的是一个对象，对象中存储了当前元素的样式
            
            注意：
                样式对象中返回的样式值，不一定能拿来直接计算，所以使用时一定要确保能够计算再进行。

                // 通过这种方法得到的样式里的属性是只读的，无法直接进行修改。
        */
        // 点击按钮之后读取元素的CSS的样式
        document.addEventListener("DOMContentLoaded",function(){
            const btn=document.querySelector(".btn")
            const box1=document.querySelectorAll(".box1")[0]
            btn.addEventListener("click",function(){

            const styleObj=getComputedStyle(box1)
            console.log(styleObj)
            console.log(styleObj.backgroundColor)

            const beforeObj=getComputedStyle(box1,"::before")
            console.log(beforeObj.backgroundColor)
            // beforeObj.width="500px" 只读不能修改

            })

        })
    </script>
</head>

<body>
    <button class="btn">点我一下</button>
    <hr>
    <div class="box1" style="border: 5px red solid;"></div>
</body>

</html>